<template>
    <view class="top">
        <!-- 标签页标题 -->
        <view class="bar">
            <view class="tab-item" v-for="tab in tabs" :key="tab.name" 
                  :class="{ active: tab.name === currentTab }"
                  @click="switchTab(tab.name)">
                {{ tab.title }}
            </view>
        </view>
        
        <!-- 内容区域 -->
        <view class="content">
           <!-- <view v-if="currentTab === 'my'">这是我的界面</view>
            <view v-else-if="currentTab === 'music'">这是音乐馆界面</view>
            <view v-else-if="currentTab === 'discover'">这是发现界面</view> -->
		<!-- 	<slot name="my"></slot>
			<slot name="music"></slot>
			<slot name="discover"></slot> -->
			<slot :name="currentTab"></slot>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
             return { 
                 // 设置默认选中的tab
                 currentTab: 'music',
                 // tab 数据
                 tabs: [{
                     name: 'my',
                     title: '我的'
                 }, 
                 {
                     name: 'music',
                     title: '音乐馆'
                 }, 
                 {
                     name: 'discover',
                     title: '发现'
                 }],
             }
        },
        methods: {
            //切换Tab
            switchTab(tabName){
                this.currentTab = tabName;
            }
        }
    }
</script>

<style lang="scss">
    .top{
        width: 100%;
        box-sizing: border-box;  /* 确保宽度是100% */
        font-size: 32rpx;
        
        .bar{
            display: flex;
            justify-content: center;
            line-height:100rpx;
            background-color: #00c273;
            color: #fff;
            height: 10vh;
            
            .tab-item{
                  /* tab文字之间的间距 */
                margin:0 10rpx;
            }
            //Tab菜单激活效果
            .active{
                color: black;
                font-size: 45rpx;
                font-weight: bold;
            }
        }
        
        .content {
            padding: 20rpx;
            /* 内容区域样式 */
        }
    }
</style>